$(function () {
    $.ajax({
        url: 'http://127.0.0.1:8086/surfing',
        type: 'GET',
        dataType: 'json',
        timeout: 5000,
        success: function (res) {
            var data = res.data[0];// 总列表
            var xAxisData = []; // x轴数据数组
            var seriesData = [
                { name: '邮件营销', type: 'line', smooth: true, symbol: 'none', areaStyle: {}, data: [] },//smooth: true,  //平滑曲线图
                { name: '联盟广告', type: 'line', smooth: true, symbol: 'none', areaStyle: {}, data: [] },//symbol: 'none',//取消折点圆圈
                { name: '视频广告', type: 'line', smooth: true, symbol: 'none', areaStyle: {}, data: [] },//areaStyle: {}, //基础面积图
                { name: '直接访问', type: 'line', smooth: true, symbol: 'none', areaStyle: {}, data: [] },
                { name: '搜索引擎', type: 'line', smooth: true, symbol: 'none', areaStyle: {}, data: [] }
            ]; // 数据系列数组

            for (var value in data) {
                xAxisData.push(value);
                seriesData[0].data.push(data[value]['邮件营销']);
                seriesData[1].data.push(data[value]['联盟广告']);
                seriesData[2].data.push(data[value]['视频广告']);
                seriesData[3].data.push(data[value]['直接访问']);
                seriesData[4].data.push(data[value]['搜索引擎']);
            }

            // 渲染图表
            var myChart = echarts.init(document.getElementById('ec02_area_accessSource'));
            myChart.setOption({
                title: {
                    text: '',
                    // textStyle: {
                    //     fontSize: 5,
                    //     color: '#fff' // 修改字体颜色
                    // }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
                    textStyle: {
                        fontSize: 8,//字体大小
                        color: '#ffffff' // 字体颜色
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',//坐标轴类型：类目轴
                    boundaryGap: false,//基础面积图：类目轴中：留白区域
                    axisPointer: {
                        show: true,
                    },
                    data: xAxisData
                },
                yAxis: {
                    name: '数量/次',
                    type: 'value', //坐标轴类型：数值轴
                    axisLine: {
                        show: true
                    },
                    min: 0, // 设置最小刻度
                    max: 1500,//设置最大刻度
                },
                series: seriesData
            });
        },
        error: function (da, status, error) {
            console.error(error);
        }
    })
})